<template>
  <div id="hot-article">
    <div class="line-10"></div>
    <dl>
      <dt><i class="el-icon-third-hot mr-5"></i><span class="bold">最热文章</span></dt>
      <div class="line"></div>
      <template v-for="item in this.articleHot">
        <dd>
          <router-link class="el-link el-link--default" :key="item.id" :title="item.title"
                       :to="{name: 'article', params: {id:item.id}}">
            <span class="el-link--inner">
              <el-row>
                <el-col :span="18" class="ellipsis">{{item.title}}</el-col>
                <el-col :span="6" class="tr"><span class="opacity-3"><i class="el-icon-view mr-2"></i>{{item.readingNum}}</span></el-col>
              </el-row>
            </span>
          </router-link>
        </dd>
      </template>
    </dl>
  </div>
</template>

<script>

  export default {
    name: "ArticleHot",
    props: {
      articleHot: null,
    }
  }
</script>

<style scoped>

</style>
